@charset "UTF-8";
/* CSS Document */
body, html{margin: 0;padding: 0; font-size:14px;height: 100%;width: 100%;font-family:"微软雅黑", sans-serif;color:#FFF;}
i{font-style:normal}
.overflow{overflow:hidden}
/*#home{background:#ff5859}*/
h1, h2, h3{font-family:"微软雅黑", sans-serif;text-transform:uppercase}
a {color:inherit;transition:all ease 0.3s;-webkit-transition:all ease 0.3s;text-decoration:none;-webkit-appearance:none;outline:none}
a:focus{outline:none;-webkit-appearance:none;}
.clear{clear:both}
.fl{ float:left}
.fr{ float:right}
strong{font-family:"微软雅黑", sans-serif;outline:none;}
section{min-height:100%;background-attachment:fixed;position:relative;overflow:hidden;transition:all ease-out 1s;-webkit-transition:all ease-out 1s;opacity:1}
.arrowIr{width:50px;height:50px;border:4px solid rgba(255,255,255,0.5);display:block;background-image:url(../img/arrow-ir.png);background-repeat:no-repeat;background-position:center;border-radius:50px;transition:all ease 0.3s;-webkit-transition:all ease 0.3s;}
/*LOADING*/
#loading{height:100%;background:#063c4a;display:;z-index:999;position:fixed;top:0;left:0;width:100%;height:100%;transition:all ease 0.5s;-webkit-transition:all ease 0.5s}
#latido{animation:5s latido infinite;-webkit-animation:5s latido infinite;height:500px;width:500px;position:absolute;left:50%;top:50%;margin-top:-250px;margin-left:-250px;}
#load{animation:0.4s load infinite;-webkit-animation:0.4s load infinite;position:absolute;position:absolute;left:50%;top:50%;margin-top:-81px;margin-left:-81px;z-index:1}
#circle{width:140px;height:140px;margin:-70px 0 0 -70px;top:50%;left:50%;position:absolute;background:url(../img/logo-load.png) no-repeat center #ff5859;border-radius:140px;z-index:2}
/*HEADER*/
header{ background-color: rgba(0, 0, 0, 0.3);position: fixed;  top: 0px; left: 0; width: 100%; height:95px;z-index:9}

header .logo img{position:absolute;top:15%;left:4%;transition:all ease 0.3s;-webkit-transition:all ease 0.3s}
header .btnMenu{position:absolute;cursor:pointer;z-index:99;top:15%;right:4%}


header.headSalmon img.blue{opacity:0}
header.headSalmon img.white{opacity:0}

header.headWhite img.salmon{opacity:0}
/*nav*/
nav{position:absolute;top:15%;right:10%;z-index:98; line-height:50px;}

nav li { display: inherit;  position: relative; float:left; text-align:center;}
nav li a {
    text-decoration: none;
    height: 100%;
    padding: 0 25px;
    display: block;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    color: #fff;
    font-size: 16px;
    margin-top: 12px;
}
nav li a:hover{ color:#E9AD54}
nav li:after {
    content: "";
    width: 0;
    height: 2px;
    background: #e9ad54;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.5s ease 0s;
}
nav li:hover:after {
	width: 100%;
}

/*NAV MAIN*/
#nav_main{height: 100px;margin-top: -50px;position: fixed;right: 60px;top: 50%;width: 12px;z-index:9;}
#nav_main div{background:#fff;border: 2px solid #fff;border-radius: 100%;height: 11px;margin:7px auto;transition: all 0.3s ease 0s;-webkit-transition: all 0.3s ease 0s;width:11px;cursor:pointer}
#nav_main div.active{background:none;border-width: 2px;height: 10px;width: 10px;}
/*HOME*/
hr{width:50px;border-radius:4px;height:4px;background:#FFF;margin:0;border:0}
hr.fat{height:8px;background:#ff5859}
hr.blue{background:#063c4a}
/*#inicio, #slide1, #slide2{cursor:pointer}*/
.welcome{font-size:82px;text-transform:uppercase;position:relative;width:735px;z-index:2;margin-left:auto;margin-right:auto}
.welcome p{display:block;padding:60px 0;letter-spacing:-5px;font-family:'Gotham-Light', sans-serif;line-height:0.85}
.welcome strong{display:block}
/*splash*/
.splash{width:80%;text-align:center;position:absolute;z-index:-1;left:0;padding:5% 0}
#inicio .splash{margin-left:-6%;margin-top:10%}
#slide1 .splash{margin-left:-4%;margin-top:8%}
#slide2 .splash{margin-left:-4%;margin-top:8%}
/*arrowDown*/
.arrowDown{position:absolute;width:80px;height:80px;border:4px solid #FFF;z-index:5;left:50%;margin-left:-44px;border-radius:80px;bottom:50px;font-family:"微软雅黑", sans-serif;font-size:32px;text-align:center;}
.arrowDown img{margin-top:39%}
.arrowDown:hover{background:#fff}
/*SLIDE 3*/


.slide1{ background:url(../img/bj221.jpg) no-repeat top center;height:100vh; min-height:100%; background-size:100% 100%;  animation-name: bgMagnify;    animation-duration: 20s;    animation-delay: 0.1s;}
.slide1_l{width: 34.56%; margin-top:15%; float:left ;}
.slide1_l h3{padding-left:106px; font-size:26px;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 300ms 1 normal both running sares-animation-move-right;}
.slide1_l p{ padding-left:106px; line-height:30px; padding-top:20px;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 700ms 1 normal both running sares-animation-move-right;}
.slide1_l a{ display:inline-block;width: 145px;height: 43px; line-height:43px;background-color: rgba(255, 102, 0, 0); border: 2px solid rgba(255,255,255,0.5);    transition: 0.5s; margin:30px auto 0 106px; text-align:center;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 1000ms 1 normal both running sares-animation-move-right;}
.slide1_l a:hover{background-color: rgba(233, 173, 86, 1); border: 2px solid rgba(233, 173, 86,1); transition: 0.5s;}

.slide1_r{width:58.44%; float:right; padding-left:7% }

.slide1_r a:nth-child(1){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 300ms 1 normal both running sares-animation-move-left;}
.slide1_r a:nth-child(2){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 500ms 1 normal both running sares-animation-move-right;}
.slide1_r a:nth-child(3){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 1000ms 1 normal both running sares-animation-move-left;}
.slide1_r a:nth-child(4){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 1500ms 1 normal both running sares-animation-move-right;}




.slide1_rimg{ float:left; width:24%;padding-top:33%;min-height: 980px; height:100%; text-align:center;border-left: 1px solid rgba(255,255,255,0.3); position:relative}
.slide1_rimg a{ display:inline-block}
.slide1_rimg:hover img{padding-top: 30px;transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;-webkit-transition: all 0.6s ease-out;    -o-transition: all 0.6s ease-out;}
.slide1_rimg:before {box-sizing: border-box;
    content: '';
    width: 100%;
    height: 0;
    background: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all 0.6s ease-out;

	
}

.slide1_rimg:hover:before {height: 100%;}






.slide2{background:url(../img/ry6rii.jpg) no-repeat center center;height:100vh; min-height:100%; background-size:100% 100%;  animation-name: bgMagnify;    animation-duration: 20s;    animation-delay: 0.1s;}


.tith2{font-size: 34px; text-align:center;margin-top: 10.5%; font-weight:100}
.e_line{width:60px; margin:20px auto;border-top: 1px solid #f0f0f0;opacity: 1;filter: alpha(opacity:100); display:block; vertical-align: middle;}
.slide2 ul{max-width: 1260px; margin:20px auto}
.slide2 ul li{width:23%; float: left; padding:10px 1%;position: relative;overflow: hidden;box-sizing: border-box;}
.slide2 ul li .porTbox { position: relative; overflow: hidden; width: 100%; height: 220px;}
.slide2 ul li img {transition: all .5s ease; height:230px;position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);    width: 100%;}
.slide2 ul li:hover img { transform: translate( -50% ,-50%) scale(1.1);}
.slide2  .showBox {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0,0,0,.6);
    transition: all 0.5s ease;
}
.slide2 ul li:hover .showBox { opacity: 1;}


.slide2 .showBoxLink {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 60%;
	color: #fff;
	text-align: center;
	font-size: 1rem;
	padding: 0.5rem 0;
}
.slide2 .showBoxLink::before {
	content: '';
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 1px;
	background: #fff;
	transition: all .5s ease;
}
.slide2 .showBoxLink::after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 1px;
	background: #fff;
	transition: all .5s ease;
}
.slide2 ul li:hover .showBoxLink::before {	width: 1rem;}
.slide2 ul li:hover .showBoxLink::after {	width: 1rem;}

.slide3{background:url(../img/bj23451.jpg) no-repeat center center;height:100vh; min-height:100%; background-size:100% 100%;  animation-name: bgMagnify;    animation-duration: 20s;    animation-delay: 0.1s;}
.slide3 .aa:before {
    content: '';
    height: 0.1px;
    display: block;    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.slide3 ul{animation-name: fadeInUp;  animation-duration: 1s; animation-delay: 1s; animation-fill-mode: both;max-width: 1260px;
margin: 30px auto; width:75%;}
.slide3 ul li{width: 23%; margin: 0px 1%;float: left;box-sizing: border-box;position: relative;}
.slide3 ul li a{ display: block; height: 100%; position: relative; transition: all .5s ease; border: 1px solid rgba(255,255,255,0.3);  padding: 10px;}
.slide3 ul li:nth-child(1){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 500ms 1 normal both running sares-animation-move-top;}
.slide3 ul li:nth-child(2){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 500ms 1 normal both running sares-animation-move-top;}
.slide3 ul li:nth-child(3){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 500ms 1 normal both running sares-animation-move-top;}
.slide3 ul li:nth-child(4){animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 500ms 1 normal both running sares-animation-move-top;}



.slide3 .pic_box { width: 100%; height:150px; position: relative;  overflow: hidden;;}
.slide3 .pic_box img{ width:100%; height:100%;}	

.slide3 .content {  width: 100% !important; height: 150px; padding: 10px;box-sizing: border-box;}
.slide3 .content .title {height: 40px; line-height: 40px; font-weight: 200; color: #fff;font-size:18px;overflow: hidden;    text-overflow: ellipsis;  white-space: nowrap;}
.slide3 .content .sunmry { font-size:14px;display: -webkit-box; height: 65px; overflow: hidden; -webkit-line-clamp: 3px;    -webkit-box-orient: vertical;    text-overflow: ellipsis;    line-height:23px;    color: #fff; }
.slide3 ul li a:before {box-sizing: border-box;
    content: '';
    width: 100%;
    height: 0px;
    position: absolute;
    background: rgba(0,0,0,0.3);
    bottom: 0px;
    left: 0px;
    z-index: -1;
    transition: all 0.4s;
    -moz-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
}

.slide3 ul li a:hover:before {height: 100%;}	
	
	
.slide4{background:url(../img/b_cbg1.jpg) no-repeat center center;height:100vh; min-height:100%; background-size:100% 100%;  animation-name: bgMagnify;    animation-duration: 20s;    animation-delay: 0.1s; }
.slide4m{ width:80%;margin:10% auto 0 auto;}
.silde4_l ,.silde4_r{ width:50%; float:left}	
.silde4_l	{ padding-left:66px;box-sizing: border-box; padding-top:5%}
.silde4_l h2{ font-size:34px;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 300ms 1 normal both running sares-animation-move-right;}
.silde4_l .e_line{ margin:20px 0;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 400ms 1 normal both running sares-animation-move-right;}
.silde4_l h3{ font-size:22px; line-height:30px;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 500ms 1 normal both running sares-animation-move-right;}
.silde4_l ul li{ background:url(../img/x1600.png) no-repeat left center; padding-left:80px; line-height:80px; height:80px;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 700ms 1 normal both running sares-animation-move-right;}
.silde4_l ul li:nth-child(2){ background-image:url(../img/x16.png);animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 800ms 1 normal both running sares-animation-move-right;}
.silde4_l ul li:nth-child(3){ background-image:url(../img/x18.png);animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 900ms 1 normal both running sares-animation-move-right;}
.silde4_l ul li:nth-child(4){ background-image:url(../img/x19.png);animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 1000ms 1 normal both running sares-animation-move-right;}	
	
.silde4_r{background-color: rgba(248, 248, 248, 0.3); padding:40px;box-sizing: border-box;animation: 600ms cubic-bezier(0.39, 0.575, 0.565, 1) 300ms 1 normal both running sares-animation-move-left;}
.silde4_r h2{ font-size:32px; text-align:center;}	
.silde4_r .e_line{border-top: 2px solid #f0f0f0;}
textarea { height: 160px;  padding: 10px;  width: 100%;box-sizing: border-box;outline: none;}
.InputText { padding-left: 10px;  outline: none;width:45%; border:none; height: 42px; margin-top:20px;}
.btn {display: inline-block; border:none; cursor: pointer; font-size: 14px; margin-top: 30px; background-color: #0077bd; width: 100%;transition: 0.5s; color:#FFF; line-height:40px;outline: none;}
.btn-primary:hover {background-color: #29b3dc;}
	
	
#footer{/*width: 1260px;*/ position:fixed; bottom:0; left:50%; margin-left:-630px; font-size:14px}	
#footer p{ line-height:28px;}	
#footer p a{ display:inline-block; padding:0 5px;}	



.banner{ width:100%; overflow:hidden}
.banner img{ width:100%}
.wap{width: 1260px; margin:0 auto;}
.pro{background-color: rgba(0, 0, 0, 0.4); position:absolute; left:0; bottom:0; height:50px; line-height:50px; width:100%; font-size:14px}
.pro a{ padding:0 5px;}
.position{ position:relative}
.lmnav{ text-align:center; margin:20px 0}
.lmnav li{ width:10%; line-height:42px; display:inline-block;margin: 0 10px; border: 1px solid #ccc;}
.lmnav li a{ color:#333;}
.lmnav li:hover,.lmnav li.on{ background:#E7AB54;border: 1px solid #E7AB54;}
.lmnav li:hover a,.lmnav li.on a{ color:#fff; transition:none}

.arc{ color:#333; padding:20px; margin-bottom:30px;}
.arctit{ font-size:24px; text-align:center; margin-bottom:10px; font-weight:100; padding-bottom:10px;border-bottom:1px #e4e4e4 solid;}



.cpshow{ margin:20px 0;}
.cpshow_l{ float:left; width:430px;}
.slideBox{ width:100%; height:360px; overflow:hidden; position:relative }
		.slideBox .hd{ height:60px; overflow:hidden; position:absolute; bottom:0; left:0  }
		.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
		.slideBox .hd ul li{ float:left;width:78px; height:60px; margin-right:10px;  cursor: pointer;overflow:hidden;}
		.slideBox .hd ul li:nth-child(5){ margin-right:0}
		.slideBox .hd ul li img{width: 100%; height:100%}
		.slideBox .bd{ position:relative; height:290px; z-index:0;   }
		.slideBox .bd li{ zoom:1; vertical-align:middle;height:290px; }
		.slideBox .bd img{ width:100%; height:100%; display:block;  }
.cpshow_r{ width:740px; float:right}
.cpshow_r li{ line-height:40px;}


.detail{border: 1px solid #f0f0f0; margin-bottom:10px}
.detail_tab{display: inline-block; text-align: center;  width: 160px;  box-sizing: border-box; color:#30373f; border-right: 1px solid #f0f0f0; line-height: 50px; border-top:solid 3px #30373f; font-size:16px;}













.nrong{ padding:20px 0; font-size:14px; line-height:25px; }
.nrong img{ max-width:100%;}
.keywordBox{}
.keywordBox a{ padding:10px 5px; display:inline-block; border:solid 1px #ccc; border-radius:5px; margin-right:5px;}
.keywordBox a:hover{ background:#E6E6E6; border: solid 1px #ADADAD}

.sxbot{ border-bottom:solid 1px #ccc; line-height:45px;}


.dan{color:#333; margin-bottom:50px; padding:0 20px;}

.bottom{ background:#000; padding:20px 0; text-align:center;}
.bottom p{ line-height:30px; }
.bottom p a{ padding:0 5px; display:inline-block; font-weight:100}

.newli{ padding:20px; color:#333}
.newList {overflow: hidden; padding:10px 0 30px 0;width: 100%;margin-bottom: 25px;border-bottom: 1px solid #eaeaea;  transition: all .5s ease;box-sizing: border-box;position: relative; }
.newLinkBox { position: relative; display: flex; flex-wrap: nowrap; }

.leftTimeBox { width: 80px; height: 98px; background: #f5f5f5; text-align: center; font-family: arial; color: #d89a3f; transition: all .5s ease;}
.newList:hover .leftTimeBox {background: #d89a3f;color: #fff;}
.newData { font-size:50px; line-height: 46px; padding-top: 15px;}
.centerContentBox {width:80%;padding-left: 3%;}
.newTitle { font-size:16px; color: #000; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: all .5s ease;}
.newList:hover .newTitle {	color: #d89a3f;}
.newList p { line-height: 24px; height: 48px; overflow: hidden;  color: #565656;}
.rightIcon { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); width: 40px; height: 40px; overflow: hidden;}
.newToolBox {  margin: 5px 0;color: #b4b4b4; background:url(../img/sj.png) no-repeat  center left; padding-left:20px; line-height:25px;}
.page{ text-align:center}
.pagination { display: inline-block; margin-bottom:50px;  border-radius: 4px;}
.pagination > li {  display: inline;}
.pagination > li > a { position: relative; float: left; padding: 8px 12px; color:#595959;  text-decoration: none;  background-color: #fff;  border: 1px solid #d9d9d9;}
.pagination > li:first-child > a { margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
.pagination > li:last-child > a {  border-top-right-radius: 4px;  border-bottom-right-radius: 4px;}
.pagination > li > a:hover,.pagination > li > a:focus{ z-index: 2;  color: #fff;  background-color: #000;  border-color: #333;}
.pagination > .active a{ color: #fff;    background: #000;border-color: #000;}

.cplist{ padding:20px 30px; }
.cp_l{ width:290px;}
.cp_l h2{background-image: linear-gradient(45deg, #e9ad54, #d27f03)!important; line-height:55px; padding-left:20px; color:#FFF; font-size:18px; margin-bottom:2px;}
.cp_l li{ padding:0 10px; line-height:40px;}
.cp_l li:hover{ background:#E9AD54; color:#fff}
.cp_l li i{ font-size:30px;  width:20px;display: inline-block; vertical-align: sub;}
.cp_r{ width:880px;}
.proLi{float: left; width: calc(100% / 3);margin: 0px; padding:10px;box-sizing: border-box;}
.proLi .proTitle {position: relative; text-align: center; padding: 0 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; font-size: 16px; font-weight:100; height: 70px; line-height: 70px; transition: all .5s ease;}
.proLi .proTitle::before { content: ''; position: absolute; left: -170px; top: -70px; width: 140px; height: 140px;    background-color: #e9ad54; transform: rotate(45deg); transition: all .5s ease;}
.proLi:hover .proTitle::before {left: -100px;}
.proLi .proTitle .search {position: absolute;left: 10px;top: 10px;display: block;width: 20px;height: 20px; color: #fff;transition: .5s;}
.proLi .proLink {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.5s ease;
    border: 1px solid rgba(243,243,243,1);
}
.proLi .proLink::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 0px;
    height: 2px; background:#e9ad54;
    transition: all .5s ease;
}
.proLi:hover .proLink {	box-shadow: 0 0 20px #ddd;}
.proLi:hover .proLink::after {width: 100%;}
.proImgBox {position: relative;    width: 100%;    height:200px;    overflow: hidden;}
.proImgBox .proImg {  position: absolute;  top: 50%;  left: 50%; transform: translate(-50%, -50%) scale(1.0); width: 100%; height:100%;    transition: all 2s ease .5s;}
.proLi:hover .proImg {transform: translate(-50%, -50%) scale(1.1);}
.lookMore{ font-size:16px; color:#e9ad54; padding:20px 0; text-align:center; width:90px; margin:0 auto}
.lookMore img{ float:right}



.piclist{ padding:20px 30px}
.piclist .proLi{width: calc(100% / 4);}



.addl{ width:40%; padding:90px 40px;box-sizing: border-box;}
.addl h3{ font-size:22px; padding-bottom:30px;}
.addl li{ background:url(../img/dh.jpg) no-repeat left center; color:#000; padding:5px 0 5px 40px;}
.addl li:nth-child(2){background:url(../img/sj.jpg) no-repeat left center}
.addl li:nth-child(3){background:url(../img/yx.jpg) no-repeat left center}
.addl li:nth-child(4){background:url(../img/dz.jpg) no-repeat left center}
.addl li strong{ display:block; font-size:16px;}
.addr{ padding-top:40px;}
.addr img{ border:solid 1px #ccc}


.ss{ padding:20px 0; margin:0 auto; width:450px;}
.form-control { width: 300px;   height: 40px;line-height:40px; padding: 0 12px; border: 1px solid #c2cad8; border-radius: 4px 0 0 4px;
	outline: none; float:left; overflow:hidden;}
.ssbtn { width:80px;background:url(../img/ss.png) no-repeat 5px center #40aae2; background-size:25%;border: 1px solid #40aae2; 
    height: 42px; color: #FFF; line-height:42px;cursor: pointer;padding-left:18px;border-radius: 0 4px 4px 0;
	outline:none; float:left;overflow:hidden; font-size:16px;}






@keyframes sares-animation-move-top {
  0% { opacity: 0; transform: translateY(20px);}
  100% {  opacity: 1;  transform: translateY(0);}
}

@keyframes sares-animation-move-bottom {
  0% {  opacity: 0;  transform: translateY(-20px);  }
  100% {    opacity: 1;    transform: translateY(0);  }
}

@keyframes sares-animation-move-left {
  0% {   opacity: 0;    transform: translateX(20px);  }
  100% {    opacity: 1;    transform: translateX(0);  }
}

@keyframes sares-animation-move-right {
  0% {    opacity: 0;   transform: translateX(-20px);  }
  100% {    opacity: 1;    transform: translateX(0);  }
}

/*
  元素隐藏的动画
*/

@keyframes sares-animation-move-top-hide {
  0% {    opacity: 1;    transform: translateY(0);  }
  100% {    opacity: 0;    transform: translateY(20px);  }
}

@keyframes sares-animation-move-bottom-hide {
  0% {    opacity: 1;    transform: translateY(0);  }
  100% {    opacity: 0;    transform: translateY(-20px);  }
}

@keyframes sares-animation-move-left-hide {
  0% {    opacity: 1;    transform: translateX(0);  }
  100% {    opacity: 0;    transform: translateX(20px);  }
}

@keyframes sares-animation-move-right-hide {
  0% {    opacity: 1;    transform: translateX(0);  }
  100% {    opacity: 0;    transform: translateX(-20px);  }
}

@keyframes sares-animation-move-left-transform {
  0% {    transform: translateX(50px);  }
  100% {    transform: translateX(0);  }
}